<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import type { HostpotInfoMobel } from '/@/api/model/pinsModel';
  import { queryHostInfo } from '/@/api/pins';

  const isLoading = ref(false);

  const route = useRoute();
  const host_id = ref<number>();
  const hostInfo = ref<HostpotInfoMobel>();
  watch(
    () => route.params.id,
    (id) => {
      host_id.value = parseInt(Array.isArray(id) ? id[0] : id, 10) ?? 0;
    },
    { immediate: true },
  );

  async function updateSpColumnInfo([host_id]) {
    if (host_id) {
      isLoading.value = true;

      hostInfo.value = await queryHostInfo(host_id);

      isLoading.value = false;
    }
  }

  watch([host_id], updateSpColumnInfo, { immediate: true });
</script>
<template>
  <div class="mx-[120px]">
    <a-row :gutter="20">
      <a-col :span="18">
        <a-card :bordered="false" class="p-[6px]">
          <a-row :gutter="15">
            <a-col :span="2" class="mt-[5px]">
              <a-avatar :size="45" :image-url="hostInfo?.user_icon" />
            </a-col>
            <a-col :span="22">
              <a-row>
                <a-col :span="12">
                  <div class="text-[18px] font-bold text-[#252933]">{{ hostInfo?.user_name }}</div>
                  <div>
                    <span class="text-[12px] font-[600] text-[#909090]">{{
                      $timeAgo(hostInfo?.createTime)
                    }}</span>
                  </div>
                </a-col>
                <a-col :span="12"> 按钮 </a-col>
              </a-row>
              <a-typography-paragraph
                class="mt-[10px] text-[rgba(0,0,0,0.8) font-[500] text-[14px]"
                :ellipsis="{
                  rows: 3,
                  expandable: true,
                }"
              >
                <div v-html="hostInfo?.content"></div>
              </a-typography-paragraph>
              <a-row>
                <a-col :span="12">
                  <div class="" v-if="hostInfo?.community_name">{{ hostInfo.community_name }}</div>
                </a-col>
                <a-col :span="12"> 11</a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-card>
        <a-card :bordered="false" class="mt-[20px]"> 评论</a-card>
      </a-col>
      <a-col :span="6"> <a-card :bordered="false"> 推荐星点 </a-card> </a-col>
    </a-row>
  </div>
</template>
